<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-6">
                <h1>UI5 Web Components non-keyed</h1>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-sm-6 smallpad">
                    <button type="button" class="btn btn-primary btn-block" id="run" @click={{run}}>Create 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="runlots" @click={{runLots}}>Create 10,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="add" @click={{add}}>Append 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="update" @click={{update}}>Update every 10th row</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="clear" @click={{clear}}>Clear</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="swaprows" @click={{swapRows}}>Swap Rows</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-hover table-striped test-data" @click={{this.handleClick}}>
        <tbody>
            {{#each _rows}}
                <tr id={{this.id}} class={{this._class}}>
                    <td class="col-md-1">{{this.id}}</td>
                    <td class="col-md-4">
                    <a data-action="select" data-id={{this.id}}>{{this.label}}</a>
                    </td>
                    <td class="col-md-1">
                    <a>
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"
                            data-action="remove" data-id={{this.id}}></span>
                    </a>
                    </td>
                    <td class="col-md-6"></td>
                </tr>
            {{/each}}
        </tbody>
    </table>
    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
<link href="/css/currentStyle.css" rel="stylesheet"/>
